<template>
  <div class="xxxx">
    <!-- 轮播图模块 -->
    <div class="slideshow">
        <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item>
           <van-image
            fit="cover"
            height="200px"
              src="https://img14.360buyimg.com/n0/jfs/t1/170362/14/5466/143880/601a83a5E90e9d6ef/5f8bb1ac4366f237.jpg"/></van-swipe-item>
         <van-swipe-item>
        <van-image
            fit="cover"
            height="200px"
            src="https://img14.360buyimg.com/n0/jfs/t1/151803/22/17528/232109/601a8389E963952df/f0e82fb1f907e1fa.jpg"/></van-swipe-item>
        <van-swipe-item>
          <van-image
             fit="cover"
             height="200px"
             src="https://img14.360buyimg.com/n0/jfs/t1/167672/4/5381/206295/601a8388E7c1545a1/ff48039d6e861f8a.jpg"/></van-swipe-item>
                   <van-swipe-item> <van-image
             fit="cover"
             height="200px"
             src="https://img14.360buyimg.com/n0/jfs/t1/169034/8/5522/185939/601a838fE6e9bcdca/e83119f5590fe813.jpg"/></van-swipe-item>
        </van-swipe>
    </div>
     <!-- 商品名称及可选 -->
    <div class="choosable zy">
      <p>{{obj.content}}</p>
      <p class="ppd">
        【到手价198元起】高颜值机械键盘预售开启，S200mini狂欢抢购！下单50元抵110元，截止时间6月17日！立即抢购！戳这里查看>
      </p>
    </div>
    <!-- 七天无理由等服务信息 -->
      <div class="serve zy hs">
        <div>七天无理由退换货</div><span class="fr" style="color:gray">月销售额{{obj.saleroom}}+</span>
        <div>两年内免费维修</div>
        <div>贴心保价两周</div>
        <div>假一赔三</div>
        <div style="color:red">￥{{obj.price}}起</div>
      </div>
    <!-- 凑数表达式 -->
    <div class="ff">
        <span class="iconfont icondianzan">最多人选</span>
        <span class="iconfont iconzuopin">靓仔专享</span>
        <span class="iconfont iconfenxiang">分享链接</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped lang='less'>
.slideshow{
    text-align: center;
    margin-bottom: 10px;
  }
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 200px;
    text-align: center;
    background-color: paleturquoise;
    height: 200px;
  }
 .zy{
    padding:0 10px ;
    font-size: 10px;
    margin-bottom: 20px;
    color: black;
  }
   .choosable{
    font-size: 15px;
    // margin-bottom: 20px;
  }
    .fr{
  float: right;
  font-size: 10px;
  margin-right: 15px;}
 /deep/  .ff{
      display: flex;
      font-size: 10px;
      span{
          justify-content: space-between;
          text-align: center;
     flex: 1;
      }
  }
  .iconfont{
      color: rgb(106, 236, 106);
      font-size: 8px;
  }
  .ppd{
    color: red;
    font-size: 13px;
  }
  .hs{
    color:rgb(11, 100, 138) !important;
  }
  .xxxx{
    margin-top: 48px;
  }
</style>
